<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-header>Header</el-header> -->
      <div>
        <el-main>
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in items" :key="item">
              <h3 text="2xl" justify="center"><img :src="item" /></h3>
            </el-carousel-item>
          </el-carousel>
        </el-main>
        <!--第一交互 -->
        <el-row class="c1">
          <el-col :span="16">
            <div class="grid-content ep-bg-purple">
              <router-link to="/cacHospitel/bookView/book">
                <div class="kg">
                  <img class="book" src="../../static/book.png" />
                </div>
              </router-link>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple-light">
              <el-card
                style="max-width: 480px; background-color: aliceblue"
                class="cardInfo"
              >
                <template #header>
                  <div class="card-header">
                    <span>预约挂号流程</span>
                  </div>
                </template>
                <p>患者无需进行登录，注册</p>
                <p>1.点击左边图片</p>
                <p>2.填写信息，提交即可</p>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <!-- 第二交互 -->
        <el-row class="c2">
          <el-col :span="8">
            <div class="grid-content ep-bg-purple">
              <el-card
                style="
                  max-width: 480px;
                  margin-left: 80px;
                  background-color: aliceblue;
                "
                class="cardInfo"
              >
                <template #header>
                  <div class="card-header">
                    <span>缴费流程</span>
                  </div>
                </template>
                <p>患者无需进行登录，注册</p>
                <p>1.点击左边图片</p>
                <p>2.填写信息，提交即可查询信息</p>
                <p>3.点击信息对应右边，扫描二维码支付</p>
              </el-card>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content ep-bg-purple-light">
              <router-link to="/cacHospitel/jiaoFei">
                <div class="kg">
                  <img class="book" src="../../static/jiaofei.png" />
                </div>
              </router-link>
            </div>
          </el-col>
        </el-row>
        <!-- 第三交互 -->
        <el-row class="c1">
          <el-col :span="16">
            <div class="grid-content ep-bg-purple">
              <router-link to="/cacHospitel">
                <div class="kg">
                  <img class="book" src="../../static/book.png" />
                </div>
              </router-link>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ep-bg-purple-light">
              <el-card style="max-width: 480px" class="cardInfo">
                <template #header>
                  <div class="card-header">
                    <span>AI问诊功能</span>
                  </div>
                </template>
                <p>功能暂未开放</p>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-footer class="footer"></el-footer>
    </el-container>
  </div>
</template>
<script setup lang="ts">
// import { ref } from 'vue'
var items = [
  'http://www.karrytech.cn/uploads/images/2022/0117/TPwtGH9TkRnIbke9MmkngrzKps6ta5SEuQqypLRn.png',
  'http://www.karrytech.cn/uploads/images/2022/0117/lsHvxynUtwZA53dv522Njg3rvSd9WOqlu87xblTt.png',
  'http://www.karrytech.cn/uploads/images/2022/0112/q0bLE3T1dpae88bNgGVxFKEAZkRK2mDm9Pyt2ehJ.jpg',
  'http://www.karrytech.cn/uploads/images/2022/0117/ztrpE4qpakKayavt28wL6FSrupDZ6JJHCXNZ3H60.jpg',
  'http://www.karrytech.cn/uploads/images/2022/0118/gFwtwyLXIXJC3QIYOF55rkzuVqr0j0kHPBp0rZBG.jpg',
  'http://www.karrytech.cn/uploads/images/2022/0117/s0cz6Y9R65zvfIq4EpprRzYa6APQCefkElY4I8EV.jpg',
]
</script>

<style scoped>
.book {
  height: 100%;
  width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.c1 {
  background-color: aliceblue;
}
.c2 {
  background-color: white;
}
.kg {
  width: auto;
  height: 500px;
  /* background-color: antiquewhite; */
  margin: 80px;
}
.cardInfo {
  margin-top: 200px;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.footer {
  background-color: #475669;
}
</style>
